<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="真实姓名" prop="keyword">
          <el-input v-model="queryParams.keyword" placeholder="请输入名字" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择" style="width: 240px" clearable>
            <el-option label="未审核" :value="0" />
            <el-option label="通过" :value="1" />
            <el-option label="驳回" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="getList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <base-page-table :table-data="tableData" :table-columns-data="tableColumnsData" :loading="loading"
      :page-num="queryParams.pageNum" :page-size="queryParams.pageSize" :total="queryParams.total"
      @handleQuery="handleQuery">
      <template #status="scope">
        <el-tag :type="state_type[scope.row.status].type">
          {{ state_type[scope.row.status].label }}
        </el-tag>
      </template>
      <template #handle="scope">
        <el-button link type="primary" :disabled="scope.row.status == 1 || scope.row.status == 2"
          @click="handleAuditPass(scope.row, 1)">
          通过
        </el-button>
        <el-button link type="danger" :disabled="scope.row.status == 1 || scope.row.status == 2"
          @click="handleAuditReject(scope.row, 1)">
          驳回
        </el-button>
        <el-button link type="primary" @click="handleAudit(scope.row, 2)">
          查看
        </el-button>
      </template>
    </base-page-table>
    <el-dialog :title="dialogType === 1 ? '处理' : '详情'" v-model="dialogVisible" width="600" :before-close="handleClose">
      <el-form :model="formData" ref="formRef" :rules="rules" label-width="120px">
        <el-form-item label="用户ID">
          {{ formInfo?.id }}
        </el-form-item>
        <el-form-item label="用户姓名">
          {{ formInfo?.fullName }}
        </el-form-item>
        <el-form-item label="身份证号">
          {{ formInfo?.idNumber }}
        </el-form-item>
        <el-form-item label="有限日期">
          {{ formInfo?.validFrom }}-{{ formInfo?.validUntil }}
        </el-form-item>
        <el-form-item label="人像面">
          <el-image style="width: 150px; height: 100px" :src="formInfo.frontFile.url" :preview-teleported="true"
            :preview-src-list="[formInfo.frontFile.url]" />
        </el-form-item>
        <el-form-item label="国徽面">
          <el-image style="width: 150px; height: 100px" :src="formInfo.backFile.url" :preview-teleported="true"
            :preview-src-list="[formInfo.backFile.url]" />
        </el-form-item>
        <el-form-item label="申请时间">
          {{ formInfo?.createTime }}
        </el-form-item>
        <el-form-item required label="是否通过">
          <el-select v-model="formData.status" placeholder="请选择" :disabled="true">
            <el-option label="通过" :value="1" />
            <el-option label="驳回" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item prop="auditDesc" v-if="formData.status == 2" label="驳回理由" :rules="{
          required: true,
          message: '请输入驳回理由',
          trigger: 'change',
        }">
          <el-input v-model="formData.auditDesc" type="textarea" :disabled="dialogType === 2" :rows="4"
            maxlength="200" />
        </el-form-item>
      </el-form>
      <template #footer v-if="dialogType === 1">
        <el-button type="primary" @click="handleError">确认</el-button>
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getRealNameList, auditRealName } from '@/api/realName'

const loading = ref(false)
const queryParams = reactive({
  keyword: "",
  status: "",
  pageNum: 1,
  pageSize: 10,
  total: 0
});
const tableData = ref([])
const dialogVisible = ref(false)
const formData = ref({
  id: undefined,
  status: 1,
  auditDesc: '',
})
const dialogType = ref(1)
const formInfo = ref()
const rules = ref({
  // auditDesc: [{ required: true, message: "请输入驳回原因", trigger: "blur" }],
});
const formRef = ref(null);
const state_type = ref({
  0: {
    label: "未审核",
    type: "warning",
  },
  1: {
    label: "通过",
    type: "success",
  },
  2: {
    label: "驳回",
    type: "danger",
  },
});
const tableColumnsData = ref([
  {
    label: "户主名称",
    prop: "fullName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "身份照号码",
    prop: "idNumber",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "有效期限-开始",
    prop: "validFrom",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "有效期限-结束",
    prop: "validUntil",
    align: "center",
    showOverflowTooltip: true,
  },
  // {
  //   label: "持卡人",
  //   prop: "userBankVo.accountName",
  //   align: "center",
  //   showOverflowTooltip: true,
  // },
  // {
  //   label: "银行名称",
  //   prop: "userBankVo.bankName",
  //   align: "center",
  //   showOverflowTooltip: true,
  // },
  // {
  //   label: "银行卡号",
  //   prop: "userBankVo.cardNo",
  //   align: "center",
  //   showOverflowTooltip: true,
  // },
  // {
  //   label: "开户支行",
  //   prop: "userBankVo.bankAccount",
  //   align: "center",
  //   showOverflowTooltip: true,
  // },
  // {
  //   label: "有效期限-结束",
  //   prop: "validUntil",
  //   align: "center",
  //   showOverflowTooltip: true,
  // },
  {
    label: "审核状态",
    prop: "status",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "status",
  },
  {
    label: "审核信息",
    prop: "auditDesc",
    align: "center",
    showOverflowTooltip: true,
    // formatter: (row) => {
    //   // 审核状态为0时返回空字符串
    //   return row.status === 0 ? '' : row.auditDesc
    // }
  },
  {
    label: "创建时间",
    prop: "createTime",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "操作",
    prop: "handle",
    align: "center",
    customSlot: "handle",
    width: 180,
    fixed: "right",
    showOverflowTooltip: true,
  }
])

async function getList() {
  loading.value = true
  const res = await getRealNameList(queryParams)
  tableData.value = res.data
  queryParams.total = res.total
  loading.value = false
}

function handleResetQuery() {
  queryParams.keyword = ''
  queryParams.status = ''
  queryParams.pageNum = 1
  queryParams.pageSize = 10
  getList()
}

function handleQuery(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  getList();
}

const handleAudit = (row, type) => {
  dialogType.value = type
  formData.value.id = row.id
  formInfo.value = row
  dialogVisible.value = true
  if (type === 2) {
    formData.value.auditDesc = row.auditDesc
  }
};

const handleAuditPass = (row, type) => {
  dialogType.value = type
  formData.value.id = row.id
  formInfo.value = row
  dialogVisible.value = true
  if (type === 2) {
    formData.value.auditDesc = row.auditDesc
  }
  // 成功
  formData.value.status = 1
};

const handleAuditReject = (row, type) => {
  dialogType.value = type
  formData.value.id = row.id
  formInfo.value = row
  dialogVisible.value = true
  if (type === 2) {
    formData.value.auditDesc = row.auditDesc
  }
  // 失败
  formData.value.status = 2
};

const handleClose = () => {
  dialogVisible.value = false;
  formData.value.auditDesc = "";
};


function handleError() {
  formRef.value.validate((valid) => {
    if (valid) {
      dialogVisible.value = false
      funcAuditRealName(formData.value);
    } else {
      console.log("error submit!!");
    }
  });
}

//审核实名
const funcAuditRealName = async (params) => {
  try {
    const res = await auditRealName(params);
    getList();
    ElMessage.success("审核完成");
  } catch (err) {
    console.log(err);
  } finally {
  }
};

onMounted(() => {
  getList()
})
</script>
